<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <script>
        // ajax json字符串 xml
        // 点击按钮，获取用户输入的数据，数据拿到之后使用ajax技术发起请求
        function toCommit(){
            // 获取用户输入的数据
            var inputs = document.querySelectorAll('input');
            console.log(inputs[0].value);
            console.log(inputs[1].value);
            // 提交数据给后台    ajax js原生的ajax，jquery的ajax $.ajax(),axios
            axios({
                url:'http://47.93.206.13:5588/waiter/saveOrUpdate',
                method:'post',
                // post方式携带的参数
                data:Qs.stringify({
                    username:inputs[0].value,
                    password:inputs[1].value
                }),
                // get方式携带的参数
                params:{}
            }).then(function(res){
                // res响应的数据
                console.log(res);
            })
            /*  1.接口路径
                2.请求方式
                3.携带的参数
                4.后台给的响应 */

            // 类数组
            console.log(inputs);
            // 判断是不是数组
            console.log(Array.isArray(inputs));
        }
        window.onload = function(){
            var btn = document.querySelector('button');
            console.log(btn);
        }

    </script>
</head>
<body>
    <form>
        用户名：<input type="text">
        密码：<input type="password">
    </form>
    <button onclick="toCommit()">提交</button>
</body>
</html>